<template>
  <div class="container" :class="{'is-open': myAtsShow}">
    <div class="main-container flex-item">
      <div class="search-form">
        <div class="search-form__common">
          <!-- 常规搜索 -->
          <div>
            <el-input style="width:250px" clearable v-model="searchForm.keywords" placeholder="输入关键词搜索" @focus="openMyRecord" size="small">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="blue" size="small" class="ml-20" @click="doSearch">搜索</el-button>
            <el-button type="normal" size="small" v-if="!searchAdvancedVisable" @click="searchAdvancedVisable=true" icon="icon icon-arr-down">
              高级搜索
            </el-button>

            <el-button type="normal" size="small" v-if="searchAdvancedVisable" @click="searchAdvancedVisable=false" icon="icon icon-arr-up">返回常规搜索</el-button>
            <el-button type="normal" size="small" @click="doSetting('search')" v-if="searchAdvancedVisable">配置搜索条件</el-button>
            <el-dropdown split-button type="normal" size="small" @click="saveSearch" v-if="searchAdvancedVisable" @command="handleStatusCommand">
              保存搜索条件
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">另存为</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="green" size="small" @click="dialogAddCandidateVisable=true" icon="icon el-icon-plus white">
              新增候选人</el-button>
          </div>
          <!-- 高级搜索 -->
          <transition name="el-zoom-in-top">
            <m-searchAdvanced v-if="searchAdvancedVisable"></m-searchAdvanced>
          </transition>
        </div>
       
        <div class="search-option-form">
          <label>搜索选项：</label>
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="搜我的人才库"></el-checkbox>
            <el-checkbox label="搜团队或人才共享库"></el-checkbox>
            <el-checkbox label="搜OA库"></el-checkbox>
          </el-checkbox-group>
          <div v-if="searchAdvancedVisable" style="float: right; line-height: 40px;">
            <label>下次默认打开高级搜索模式</label>
            <span class="ml-10"><el-switch v-model="switchValue"  active-color="#0073dd" inactive-color="#a2aec8"></el-switch></span>
          </div>
        </div>
        
        <!-- 设置按钮 -->
        <div class="table-setting" @click="doSetting('listField')">
          <i class="icon icon-setting"></i>
        </div>
      </div>
      <div class="layout-table" :class="{'is-open': !isOpen, 'is-fixed': isFixed}">
        <div class="my-ats-box" v-if="!isOpen">
          <!-- 保存的搜索 -->
          <transition name="fadeInLeft">
            <m-searchBox v-if="!isOpen"></m-searchBox>
          </transition> 
        </div>
        <div class="table-box">
          <!-- table -->
          <m-dataTable ref="dataTable"></m-dataTable>
        </div>
      </div>
    </div>
    <div class="right-side" :class="{'is-close': !myAtsShow, 'is-fixed': isFixed2}">
      <div @mouseenter="showMyAts">
        <transition name="fadeInRight">
          <m-atsCount v-if="myAtsShow" @close="hideMyAts"></m-atsCount>
        </transition>
        <div class="close-title" v-show="!myAtsShow">
          <div class="mini-t"></div>
          <div class="title">
            我<br>的<br>A<br>T<br>S
          </div>
          <i class="icon icon-arr-left"></i>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div class="back-top" @click="backTop">
        <i class="icon icon-backtop"></i>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <dialog-setting :visible.sync="dialogSettingVisable" :settingType="settingType" 
      @changeActive="changeSettingActive"></dialog-setting>

    <!-- 新增候选人弹窗 -->
    <dialog-addCandidate :visible.sync="dialogAddCandidateVisable"></dialog-addCandidate>

    <!-- 每日早安提醒 -->
    <dialog-dailyReminder :visible.sync="dialogDailyReminderVisable"></dialog-dailyReminder>

    <!-- 保存搜索条件 -->
    <dialog-searchbox :visible.sync="dialogSearchVisible" :type="saveSearchType" v-if="dialogSearchVisible"></dialog-searchbox>
  </div>
</template>

<script>
  import {Input, Checkbox, CheckboxGroup, Button, Switch, Dropdown, DropdownMenu, DropdownItem} from 'element-ui'
  import ModuleAdvancedSearch from './components/advancedSearch'
  import TableData from './components/dataTable/index'
  import DialogSearchbox from './components/dialogSearchbox'
  export default {
    components: {
      [Input.name] : Input,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      [Switch.name]: Switch,
      [Button.name]: Button,
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      'm-dataTable': TableData, //表格
      'm-atsCount': () => import('@/components/common/components/myATS'), //我的ATS
      'm-searchBox': () => import('./components/searchRecord'), //我的搜索记录
      'm-searchAdvanced': ModuleAdvancedSearch,
      'dialog-addCandidate': () => import('./components/addCandidate'), //新增候选人弹窗
      'dialog-setting': () => import('./components/setting'), //设置弹窗
      'dialog-dailyReminder': () => import('./components/dailyReminder'), //每日早安提醒
      'dialog-searchbox': DialogSearchbox
    },
    data () {
      return {
        dialogSettingVisable: false, //设置弹窗 是否显示
        dialogAddCandidateVisable: false, //新增候选人弹窗 是否显示
        dialogDailyReminderVisable: true, //每日早安消息弹窗 是否显示
        searchAdvancedVisable: false, //是否显示高级设置 
        isOpen: true, //‘我的ATS’ 是否展开状态
        searchForm: {
          keyword: ''
        },
        checkList: ['搜我的人才库', '搜团队或人才共享库', '搜OA库'],
        settingType: '',
        switchValue: false,
        dialogSearchVisible: false,
        myAtsShow: false,
        isFixed: false,
        isFixed2: false
      }
    },
    created() {
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/talent_pool') == 0){
          this.initSticky()
          this.initSticky2()
        }
      })
    },
    methods: {
      //打开我的记录
      openMyRecord() {
        this.isOpen = false
        this.$nextTick(_ => {
          this.$refs.dataTable.initWidth() //重新计算表头高度
        })
      },
      changeSettingActive(val) {
        this.settingType = val
      },
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      },
      initSticky2() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight
        if(_height >= topHeight * _zoom) {
          this.isFixed2 = true
        } else {
          this.isFixed2 = false
        }
      },
      /**
       * @param {type} 设置类型 
       * @description 根据类型打开相对的弹窗界面
       */
      doSetting(type) {
        this.settingType = type
        this.dialogSettingVisable = true
      },
      showMyAts() {
        this.myAtsShow=true
        this.$nextTick(_ => {
          this.$refs.dataTable.initWidth()
        })
      },
      hideMyAts() {
        this.myAtsShow=false
        this.$nextTick(_ => {
          this.$refs.dataTable.initWidth()
        })
      },
      /**
       * @description 搜索操作
       */
      doSearch() {
        this.$refs.dataTable.loadData(this.searchForm)
      },
      /**
       * @description 返回顶部
       */
      backTop() {
        window.scroll(0,0)
      },
      /**
       * @description 保存搜索条件
       */
      saveSearch() {
        this.dialogSearchVisible = true
        this.saveSearchType = 'save'
      },
      handleStatusCommand(val) {
        this.dialogSearchVisible = true
        this.saveSearchType = 'saveAs'
      }
    }
  }
</script>

<style lang="scss">
  
  
</style>
